<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="dynamic-data_cpu" style="width: 500px;height:300px;float:left"></div>
<script src="/javascripts/echarts-all-3.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart_cpu = echarts.init(document.getElementById('dynamic-data_cpu'));

// 指定图表的配置项和数据
option_cpu = {
    title: {
        text: 'CPU利用率'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['CPU利用率']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'CPU利用率',
            type:'line',
            stack: '总量',
            data:[]
        }
    ]
};

//   myChart.setOption(option);
  
setInterval(function (){
    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
    var data = JSON.parse(sessionStorage.getItem("oneResult"));

    var data0 = option_cpu.series[0].data;
    //超过指定记录数，则删除之前的
    var size = 300
    if(data0.length>size){
        data0.shift();
    }
    // var insertData0 = Math.round(Math.random() * 1000);
    var insertData0 = data.vm_cpu
    data0.push(insertData0);

    if(option_cpu.xAxis.data.length>size){
        option_cpu.xAxis.data.shift();
    }
    option_cpu.xAxis.data.push(axisData);

    myChart_cpu.setOption(option_cpu);
    
    //MLlib
    var predicted = data.predicted
    if(predicted == 0){
        $("#predicted").html("低")
        $("#predicted").parent().removeClass("alert-warning").removeClass("alert-danger")
        $("#predicted").parent().addClass("alert").addClass("alert-info")
    }else if(predicted == 1){
        $("#predicted").html("中")
        $("#predicted").parent().removeClass("alert-info").removeClass("alert-danger")
        $("#predicted").parent().addClass("alert").addClass("alert-warning")
    }else if(predicted == 2){
        $("#predicted").html("高")
        $("#predicted").parent().removeClass("alert-info").removeClass("alert-warning")
        $("#predicted").parent().addClass("alert").addClass("alert-danger")
    }
}, 1000);
</script>